<template>
  <div>
    <van-index-bar :index-list="indexList" highlight-color="red">
      <template v-for="(item, index) in dataList">
        <van-index-anchor 
            :index="item.index"
            :key="index"
            style="background:#ccc"
        >

        </van-index-anchor>
        <van-cell
            v-for="(sub ) in item.data"
            :key='sub.name'
            :title='sub.name'
            @click="changecity(sub)"
        >

        </van-cell>
      </template>

      <!-- <van-index-anchor index="A">A</van-index-anchor>
      <van-cell title="北京" />
      <van-cell title="文本" />
      <van-cell title="文本" />

      <van-index-anchor index="B">B</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="C">C</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="D">D</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="E">E</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="F">F</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="G">G</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="H">h</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" /> -->
    </van-index-bar>
  </div>
</template>

<script>
import { citylistdata } from "@/api/api";
export default {
  props: [],
  components: {},
  data() {
    return {
      indexList: ["A", "B", "C", "D"],
      dataList: [],
    };
  },

  methods: {
      changecity(cityinfo){
          console.log('cityinfo',cityinfo)
          this.$store.commit('addcityinfo',cityinfo)
          this.$router.push('/cinema')
      }
  },

  computed: {},

  watch: {},

  filters: {},

  beforeCreate() {},

  created() {
    setTimeout(() => {
      this.eventbus.$emit("footnav", false);
    }, 0);
  },

  beforeMount() {},

  async mounted() {
    var tem = await citylistdata();
    console.log("tem", tem);
    this.indexList = tem[1];
    this.dataList = tem[0];
  },

  beforeUpdate() {},

  updated() {},

  beforeDestroy() {},

  destroyed() {
    setTimeout(() => {
      this.eventbus.$emit("footnav", true);
    }, 0);
  },
};
</script>


<style  lang='scss'>
</style>
